
<template>
  <div class="xjjxmm-header">
    <!-- <div>Element Plus</div> -->
    <el-menu class="el-menu-demo" mode="horizontal" router>
      <el-menu-item>
        <div>后台管理</div>
      </el-menu-item>
      <el-sub-menu :index="item.name" v-for="item in routes" :key="item.name">
        <template #title>{{ item.meta.title }}</template>
        <el-menu-item :index="subitem.name" v-for="subitem in item.children" :key="subitem.name"
          :route="{ name: subitem.name }">
          {{ subitem.meta.title }}
        </el-menu-item>
      </el-sub-menu>
      <!-- <el-menu-item :index="null">
      <button class="border-none w-full bg-transparent cursor-pointer" style="height: var(--ep-menu-item-height);"
    @click="toggleDark1()">
        <i inline-flex i="dark:ep-moon ep-sunny" />
      </button>
    </el-menu-item> -->
    </el-menu>
    <div class="absolute right-3 flex">
      <button class="border-none w-full bg-transparent cursor-pointer" style="height: var(--ep-menu-item-height);"
        @click="toggleDark1()">
        <i inline-flex i="dark:ep-moon ep-sunny" />
      </button>

      <el-button text style="height: var(--ep-menu-item-height);" @click="onLogOut">
        
          <IconIcBaselineLogIn inline-flex />
       
      </el-button>

    </div>
  </div>
</template>

<script setup>
import { toggleDark } from '@/composables';
import { usePermissionStore } from "@/store/permission"
import { useRouter, useRoute } from 'vue-router'
//export default {
// setup() {
const permissionStore = usePermissionStore()
const routes = permissionStore.dynamicRoutes
const toggleDark1 = toggleDark

const router = useRouter()
    const route = useRoute()
const onLogOut = () => {
  permissionStore.logout()
  router.push({ path:  '/login' })
}
    //return { toggleDark,  routes }
 // }
//}
</script>

<style lang="scss" scoped>
.xjjxmm-header {
  display: flex;
  flex-basis: 100%;
  width: 100%;
  align-items: center;

  ul {
    flex-grow: 1;
  }
}
</style>
